import React from 'react';
import { Table, Card, Tag, Divider } from 'antd';
import Echarts from 'echarts';
import Axios from 'axios';
import { Link } from 'react-router-dom';

import '@/css/index.css';
// 表格Header区设置
let i = 1;
let j = 1;
let k = 0;

// 表格中标签的颜色列表
const colorList = [
  '#ffa502',
  '#ff6348',
  '#70a1ff',
  '#2ed573',
  '#B33771',
  '#FFC312',
  '#0be881',
  '#ffa801',
  '#FDA7DF'
];
// 表格表头数据设置
const columns = [
  {
    title: '设备编号',
    dataIndex: 'machineNumber',
    key: 'machineNumber',
    render: text => (
      <Tag
        color={colorList[k++]}
        style={{ width: '50px' }}
        className="animate-scale"
      >
        <Link to={`details/${i++}`} title={`点击跳转设备${j++}`}>
          &nbsp;&nbsp;{text}&nbsp;&nbsp;
        </Link>
      </Tag>
    )
  },
  {
    title: '上传时间',
    dataIndex: 'uploadTime',
    key: 'uploadTime'
  },
  {
    title: '光照强度',
    dataIndex: 'light',
    key: 'light'
  },
  {
    title: '温度',
    dataIndex: 'temperature',
    key: 'temperature'
  },
  {
    title: '湿度',
    key: 'humidity',
    dataIndex: 'humidity',
    key: 'humidity'
  },
  {
    title: '烟雾',
    key: 'smoke',
    dataIndex: 'smoke',
    key: 'smoke'
  }
];

// ajax获取的数据
let classData = [];

let lightData = [];
let temperaturetData = [];
let humidityData = [];
let smokeData = [];

// 指定图表的配置项和数据
// 图表一
const option1 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  legend: {
    data: ['光照', '温度', '湿度', '烟雾']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '设备1',
        '设备2',
        '设备3',
        '设备4',
        '设备5',
        '设备6',
        '设备7',
        '设备8',
        '设备9',
        '设备10'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '光照',
      type: 'bar',
      data: lightData
    },
    {
      name: '温度',
      type: 'bar',
      data: temperaturetData
    },
    {
      name: '湿度',
      type: 'bar',
      data: humidityData
    },
    {
      name: '烟雾',
      type: 'bar',
      data: smokeData
    }
  ]
};

// 组件样式表
const styleSheet = {
  chartContainer: {
    display: '-webkit-flex' /* Safari */,
    display: 'flex',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    padding: '30px'
  },
  tableContainer: {
    width: '90%',
    margin: '0 auto'
  },
  card: {
    width: '90%',
    height: '600px',
    // margin: '20px 0 20px 20px'
    margin: '0 auto'
  }
};

class ChartGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  /**
   * @description 组件生命周期函数,负责获取ajax请求数据，并设置渲染Echart于页面上
   * @param null
   */
  componentDidMount() {
    this.getClassData(() => {
      // Echart设置
      const myChart = Echarts.init(document.getElementById('chart1'));
      myChart.setOption(option1);
    });
  }

  /**
   * @description 发送ajax-get请求到接口('http://sakumyz.xyz/api/class-data')
   *              并将接口中的数据保存在数组中，方便调用
   * @param function 参数是一个回调函数，用以在数据保存完毕后，再进行图标渲染，否则将先渲染图表得到空数据
   */
  getClassData(callback) {
    Axios.get('http://sakumyz.xyz/api/class-data')
      .then(res => {
        // 将ajax请求得到的全部数据保存到classData数组中
        const data = res.data.classData;
        data.forEach(element => {
          classData.push(element);
          lightData.push(element.light);
          temperaturetData.push(element.temperaturet);
          humidityData.push(element.humidity);
          smokeData.push(element.smoke);
        });

        this.setState({ loading: false });
        // console.log(classData);
      })
      // 数据全部获取后进行回调(渲染表格)
      .then(() => {
        callback();
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div>
        <h3 style={{ marginTop: '50px', textAlign: 'center' }}>
          教室环境参数一览表
        </h3>

        <div style={styleSheet.tableContainer}>
          <Table
            columns={columns}
            dataSource={classData}
            pagination={false}
            bordered={true}
          />
        </div>
        <Divider />
        <div style={styleSheet.chartContainer}>
          <Card style={styleSheet.card} id="chart1" />
          {/* <Card style={styleSheet.card} id="chart2" />
          <Card style={styleSheet.card} id="chart3" />
          <Card style={styleSheet.card} id="chart4" />
          <Card style={styleSheet.card} id="chart5" /> */}
        </div>
      </div>
    );
  }
}

// 使用刚指定的配置项和数据显示图表。

export default ChartGroup;
